<!--设备标签-->
<template>
  <div class="equipment-labels">
    <el-form :inline="true" class="search-form">
      <div>
        <el-form-item class="title">
          设备标签
        </el-form-item>
        <el-form-item>
          <el-input v-model="tagName" placeholder="请输入标签" clearable @keyup.enter.native="queryList('search', 'tagName')">
            <el-button slot="append" class="search-icon" icon="icon-sousuo" @click="queryList('search', 'tagName')"></el-button>
          </el-input>
        </el-form-item>
      </div>
      <el-button type="primary" class="button-container" size="14" @click="handleAddOrder">新增标签</el-button>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      size="medium"
      :header-cell-style="{ background: '#F5F6F7' }"
    >
      <el-table-column label="标签">
        <template slot-scope="scope">
          {{ scope.row.tagName || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="标签说明" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.tagDescription || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="设备数量">
        <template slot-scope="scope">
          {{ scope.row.amount }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="operate" @click="jumpDetails(scope.row)">详情</el-button>
          <el-button
            v-if="!scope.row.amount"
            type="text"
            size="operate"
            @click="handleDelete(scope.row.id)">删除</el-button>
          <el-popover
            v-else
            placement="top"
            :width="204"
            trigger="hover"
            content="设备数量不为0，不能删除"
          >
            <template #reference>
              <el-button
                disabled
                type="text"
                size="operate"
                style="margin-left: 24px;"
                :disabled="!!scope.row.amount"
                @click="handleDelete(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
    <el-dialog
      title="新增标签"
      :visible.sync="dialogVisible"
      width="596px"
      :before-close="handleClose"
      custom-class="equipment-labels-dialog">
      <el-form
        ref="form"
        :model="addFormData"
        :rules="rules"
        width="596px"
        label-width="80px"
        label-position="right">
        <el-form-item label="标签" prop="tagName">
          <el-input v-model="addFormData.tagName" placeholder="请输入标签名称" maxlength="16" clearable></el-input>
        </el-form-item>
        <el-form-item label="标签说明" prop="tagDescription">
          <el-input
            v-model="addFormData.tagDescription"
            placeholder="请输入标签说明，最多100个字符"
            type="textarea"
            maxlength="100"
            show-word-limit
            :rows="6"
            clearable>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="14" @click="handleClose">取 消</el-button>
        <el-button type="primary" size="14" @click="onsubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getList, deleteEquipmentLabels, addLabels } from '@/api/device-identity-auth/equipment-labels'
export default {
  name: 'equipmentLabels',
  data() {
    return {
      tableData: [], // 列表数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 0, // 列表数据总条数
      loading: true,
      tagName: '', // 标签名称
      addFormData: {
        tagName: '', // 标签名称
        tagDescription: '' // 标签说明
      },
      rules: {
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          { min: 2, max: 16, message: '请输入规范的标签名称', trigger: 'blur' },
          { validator: this.validateTagName, trigger: 'blur' }
        ]
      },
      dialogVisible: false
    }
  },
  created() {
    this.queryList()
  },
  methods: {
    // 客户名称校验提示
    validateTagName(rule, value, callback) {
      const flag = new RegExp(/^[a-zA-Z0-9\u4e00-\u9fa5]+$/).test(value)
      if (!flag) {
        callback(new Error('请输入规范的标签名称'))
      } else {
        callback()
      }
    },
    /**
     * 查询列表
     */
    queryList(condition, tagName) {
      this.currentPage = condition === 'search' ? 1 : this.currentPage
      this.loading = true
      const params = {
        tagName: tagName && this.tagName,
        size: this.pageSize,
        current: this.currentPage
      }
      getList(params).then(res => {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      }).catch(err => {
        this.$message.error(err.message)
      }).finally(() => {
        this.loading = false
      })
    },
    // 新增标签
    handleAddOrder() {
      this.dialogVisible = true
    },
    // 跳转详情
    jumpDetails(row) {
      this.$router.push({
        path: '/device-identity-auth/equipment-labels/details',
        query: {
          id: row.id,
          tagName: row.tagName
        }
      })
    },
    // 删除
    handleDelete(id) {
      const params = {
        deviceTagId: id
      }
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteEquipmentLabels(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.queryList()
        }).catch(err => {
          this.$message.error(err.message)
        })
      }).catch(err => {})
    },
    // 关闭新增标签弹窗
    handleClose() {
      this.dialogVisible = false
      this.$refs['form'].resetFields()
    },
    /**
     * 保存新增标签
     */
    onsubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = {
            ...this.addFormData
          }
          addLabels(params).then(res => {
            this.$message({
              type: 'success',
              message: '新增成功!'
            })
            this.dialogVisible = false
            this.$refs['form'].resetFields()
            this.queryList()
          }).catch(err => {
            this.$message.error(err.message)
          })
        } else {
          return false
        }
      })
    },
    // 每页条数改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.queryList()
    },
    // 当前页变时触发
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryList()
    }
  }
}
</script>
<style lang="scss" scoped>
.equipment-labels {
  .search-form {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 18px;
      font-weight: 400;
      color: #252525;
      margin-right: 56px;

      ::v-deep .el-form-item__content {
        font-size: 18px;
      }
    }

    ::v-deep .el-form-item {
      margin-right: 32px;
    }
  }
}
</style>